import { defaultConfig } from "../../utils/config";

const { shared, spring } = wx.worklet

function shuffleArray(array: any[]) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

export class LogoAnimate {
  //canvas上下文
  ctx: any
  //canvas 元素
  canvas: any
  //定时器对象
  requestAnimationFrameId: number = 0
  //屏幕高度
  windowHeight = 0
  //屏幕宽度
  windowWidth = 0
  //扫光图片
  lightImage: any
  //小程序logo
  miniLogo: any
  //驾校logo
  drivingSchoolLogo: any
  //logo之间的x图片
  XImage: any
  //扫光的起点
  lightX = 0
  //扫光图片每次移动
  lightIntervalX = 8
  //屏幕分辨率
  dpr = 1
  //logo尺寸
  miniLogoSize = {
    w: 90,
    h: 92
  }
  //驾校尺寸
  drivingSchoolSize = {
    w: 96,
    h: 92
  }
  //小程序logo起点变量
  miniLogoX = shared(0)
   //驾校logo起点变量
  drivingSchoolLogoX = shared(0)
  //缩放比例
  scale = shared(0)
  //扫光图片尺寸
  lightSize = {
    w: 100,
    h: 160
  }
  constructor() { }
  //重置数据
  reset() {
    this.miniLogoX.value = 0
    this.drivingSchoolLogoX.value = 0
    this.scale.value = 0
    this.windowHeight = 0
    this.windowWidth = 0
    this.lightX = 0
    this.lightIntervalX = 4
    this.dpr = 1
    this.miniLogoSize = {
      w: 90,
      h: 92
    }
    this.drivingSchoolSize = {
      w: 96,
      h: 92
    }
    this.lightSize = {
      w: 100,
      h: 160
    }
  }
  init(id: string) {
    this.reset()
    this.clear()
    const query = wx.createSelectorQuery();
    query.select(id)
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log('canvas',id)
        this.canvas = res[0].node;
        this.ctx = this.canvas.getContext('2d')

        const sys = wx.getSystemInfoSync()
        this.windowHeight = sys.windowHeight
        this.windowWidth = sys.windowWidth

        this.dpr = sys.pixelRatio
        this.canvas.width = res[0].width * this.dpr
        this.canvas.height = res[0].height * this.dpr
        // this.ctx.scale(this.dpr, this.dpr)
        this.lightSize.w = this.lightSize.w * this.dpr
        this.lightSize.h = this.lightSize.h * this.dpr
        this.miniLogoSize.w = this.miniLogoSize.w * this.dpr
        this.miniLogoSize.h = this.miniLogoSize.h * this.dpr
        this.drivingSchoolSize.w = this.drivingSchoolSize.w * this.dpr
        this.drivingSchoolSize.h = this.drivingSchoolSize.h * this.dpr
        this.lightX = -this.lightSize.w
        this.lightIntervalX = 4 * this.dpr
        this.miniLogoX = shared(this.miniLogoSize.w / 2 + this.canvas.width / 2)
        this.drivingSchoolLogoX = shared(-this.drivingSchoolSize.w / 2 - this.canvas.width / 2)

        this.requestFile()
      });
  }
  async requestFile() {
    const drivingSchoolLogoImage = wx.getStorageSync('currentDrivingSchool').loginLogo ?? defaultConfig.loginLogo
    this.lightImage = this.lightImage || await this.download('http://static.pub-drive.chexinlian.com/wxmini/625f77ece2c56d37')
    this.miniLogo = this.miniLogo || await this.download('http://static.pub-drive.chexinlian.com/wxmini/caa7a7f8c3ad2ba3')
    this.drivingSchoolLogo = await this.download(drivingSchoolLogoImage)
    this.XImage = this.XImage || await this.download('http://static.pub-drive.chexinlian.com/wxmini/6fd73508e7908087')
   
    this.transformX()
    this.draw()
    
    this.requestAnimationFrameId = setInterval(() => {
      this.draw()
    }, 1000 / 60)
  }
  //绘制图片
  draw() {
    if (this.lightX >= (this.canvas.width + this.lightSize.w)) {
      this.lightX = - this.lightSize.w
    } else {
      this.lightX += this.lightIntervalX
    }

    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    //小程序logo
    this.ctx.save()
    //把中心点移动到画布中心
    this.ctx.translate(this.canvas.width / 3 + this.drivingSchoolLogoX.value, this.canvas.height / 2)
    // this.ctx.rotate(this.angle.value * Math.PI / 180)
    this.ctx.drawImage(this.drivingSchoolLogo, - this.drivingSchoolSize.w / 2, - this.drivingSchoolSize.h / 2, this.drivingSchoolSize.w, this.drivingSchoolSize.h)
    this.ctx.restore()

    //驾校logo
    this.ctx.save()
    //把中心点移动到画布中心
    this.ctx.translate(this.canvas.width / 3 * 2 + this.miniLogoX.value, this.canvas.height / 2)
    // this.ctx.rotate(this.angle2.value * Math.PI / 180)
    this.ctx.drawImage(this.miniLogo, - this.miniLogoSize.w / 2, - this.miniLogoSize.h / 2, this.miniLogoSize.w, this.miniLogoSize.h)
    this.ctx.restore()

    //两个logo中间的x
    // this.ctx.save()
    // //把中心点移动到画布中心
    // this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2)
    // this.ctx.scale(this.scale.value, this.scale.value)
    // this.ctx.drawImage(this.XImage, -5 * this.dpr, -5 * this.dpr, 10 * this.dpr, 10 * this.dpr)
    // this.ctx.restore()

    //扫光
    this.ctx.save()
    this.ctx.translate(this.canvas.width / 2, 0)
    this.ctx.globalCompositeOperation = 'overlay'
    this.ctx.drawImage(this.lightImage, - this.lightSize.w + this.lightX, (this.canvas.height - this.lightSize.h) / 2, this.lightSize.w, this.lightSize.h)
    this.ctx.restore()

    // this.requestAnimationFrameId = this.canvas.requestAnimationFrame(this.draw.bind(this))
  }
  //执行worklet动画
  transformX() {
    "worklet";
    this.miniLogoX.value = spring(0, {}, () => {
      "worklet";
      this.scale.value = spring(1, {}, () => {
        "worklet";
      })
    })
    this.drivingSchoolLogoX.value = spring(0, {}, () => {
      "worklet";
    })
  }
  //加载图片
  download(url: string) {
    return new Promise((resolve) => {
      const el = this.canvas.createImage()
      el.src = url
      el.onload = (res: any) => {
        console.log('image', el)
        resolve(el)
      }
    })
  }
  //清楚定时器
  clear() {
    if (this.requestAnimationFrameId) {
      // this.canvas.cancelAnimationFrame(this.requestAnimationFrameId)
      clearInterval(this.requestAnimationFrameId)
    }
  }
}